<template>
  <div class="screen-box">
    <div class="screen-content" id="screen">
      <div class="screen-header">
        <div class="screen-header-top">
          <!-- 天气 -->
          <div class="screen-header-top-weather">
            <!--            <div class="screen-header-top-weather-image"></div>-->
            <!-- <div class="screen-header-top-weather-text">请先选择区域选择天气</div> -->
          </div>
          <!-- 时间 -->
          <div class="screen-header-top-time">
            <div class="today-time">{{ state.show_time.current }}</div>
            <div class="year-time-box">
              <div class="year-time-box-year">{{ state.show_time.year }}</div>
              <div class="year-time-box-week">{{ state.show_time.week }}</div>
            </div>
          </div>
          <!-- 交易额 -->
          <div class="screen-header-top-sales">
            <div class="screen-header-top-sales-text">累计交易额: {{ formatAmount(state.amount) }}元</div>
          </div>
          <!-- 记录 -->
          <div class="screen-header-top-record">
            <div class="screen-header-top-record-item" @click="openError('fault')">故障记录</div>
            <div class="screen-header-top-record-item" @click="openError('scram')">紧停记录</div>
            <div class="screen-header-top-record-item" @click="openError('oos')">预警记录</div>
          </div>
          <!-- 地区签约 -->
          <div class="qianyve">
            <cCascader />
          </div>
          <!-- 筛选 -->
          <div class="screen-header-top-sift">
            <div class="screen-header-top-sift-all-time" @click="changeTime('start')">
              <div class="screen-header-top-sift-all-text">{{ state.begin_time || '全部时间' }}</div>
              <div class="screen-header-top-sift-all-image"></div>
              <div style="position:absolute; left: 0;top: 0;width: 180px;height: 40px;">
                <el-date-picker
                  ref="startTime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="datetime"
                  placeholder="报名截止日期"
                  style="opacity: 0"
                  v-model="state.begin_time"
                  @change="changeStartTime"
                />
              </div>
            </div>
            <div class="screen-header-top-sift-arrow"></div>
            <div class="screen-header-top-sift-all-time screen-header-top-sift-all-time-right"
                 @click="changeTime('end')">
              <div class="screen-header-top-sift-all-text">{{ state.end_time || '全部时间' }}</div>
              <div class="screen-header-top-sift-all-image"></div>
              <div style="position:absolute; left: 0;top: 0;width: 180px;height: 40px;">
                <el-date-picker
                  ref="endTime"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  type="datetime"
                  placeholder="报名截止日期"
                  style="opacity: 0"
                  v-model="state.end_time"
                  @change="changeEndTime"
                />
              </div>
            </div>
            <div :class="['screen-header-top-sift-item',state.time_index === 'today' && 'type-active']"
                 @click="changeTimeType('today')">今日
            </div>
            <div :class="['screen-header-top-sift-item',state.time_index === 'week' && 'type-active']"
                 @click="changeTimeType('week')">本周
            </div>
            <div :class="['screen-header-top-sift-item',state.time_index === 'month' && 'type-active']"
                 @click="changeTimeType('month')">本月
            </div>
            <div :class="['screen-header-top-sift-item',state.time_index === 'year' && 'type-active']"
                 @click="changeTimeType('year')">本年
            </div>
          </div>
          <div class="screen-header-top-sift" style="top: 170px;padding-left:30px;z-index:99999">
            <img @click="state.btnIndex=0" src="/static/images/screen/beijing.png" alt="" :class="{'btn-gray':state.btnIndex!=0}" style="margin-right:20px;">
            <img @click="state.btnIndex=1" src="/static/images/screen/shanghai.png" alt="" :class="{'btn-gray':state.btnIndex!=1}" style="margin-right:20px">
            <img @click="state.btnIndex=2" src="/static/images/screen/guangzhou.png" alt="" :class="{'btn-gray':state.btnIndex!=2}" style="margin-right:20px">
            <img @click="state.btnIndex=3" src="/static/images/screen/shenzhen.png" alt="" :class="{'btn-gray':state.btnIndex!=3}" style="margin-right:20px">
            <img @click="state.btnIndex=4" src="/static/images/screen/chongqing.png" alt="" :class="{'btn-gray':state.btnIndex!=4}" style="margin-right:20px">
          </div>
          
        </div>
      </div>
      <!-- 警告线 -->
      <div class="device-status" :class="[state.warn === 1 ? 'device-status-warn' : 'device-status-warn-1']"
           v-if="state.isBlink">
        <div class="device-status-btn" @click="changeWarn">关闭警报</div>
      </div>
      <div class="device-status" v-else></div>
      <!-- 全屏闪烁警告 -->
      <div class="screen-blink-warn" :class="[state.warn === 1 ? 'screen-blink-warn-1' : 'screen-blink-warn-2']"
           v-if="state.isBlink"></div>
      <div class="screen-content-data">
        <!-- 左侧数据 -->
        <div class="screen-content-data-left">
          <div class="screen-content-data-left-income">
            <div class="screen-content-data-left-income-top">
              <div class="screen-content-data-left-income-top-arrow"></div>
              <div class="screen-content-data-left-income-top-right">
                <div
                  :class="['screen-content-data-left-income-top-right-tab',state.incomeType === 1 ? 'left-active' : 'left']"
                  @click="changeType(1,'incomeType')">
                  收益分类
                </div>
                <div
                  :class="['screen-content-data-left-income-top-right-tab-active',state.incomeType === 1 ? 'right' : 'right-active']"
                  @click="changeType(2,'incomeType')">
                  收益趋势
                </div>
              </div>
            </div>
            <template v-if="state.showIncomeType === 1">
              <div class="screen-content-data-left-income-bottom" v-if="state.incomeType === 1">
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_total" autoresize />
                  <!-- <div class="screen-content-data-left-income-bottom-item-text">总收益</div> -->
                  <div class="screen-content-data-left-income-bottom-item-text">
                    <div>地级市</div>
                    <div>签约率</div>

                    <div>{{(count[state.btnIndex]+1.2).toFixed(2)}}%</div>
                  </div>
                </div>
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_wash" autoresize />
                  <div class="screen-content-data-left-income-bottom-item-text">
                    <div>BDM签约率</div>
                    <div>{{(count[state.btnIndex]-1).toFixed(2)}}%</div>
                  </div>
                </div>
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_shop" autoresize />
                  <div class="screen-content-data-left-income-bottom-item-text">
                    <div>服务中心</div>
                    <div>签约率</div>

                    <div>{{(count[state.btnIndex]-1.1).toFixed(2)}}%</div>

                  </div>
                </div>
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_ad" autoresize />
                  <div class="screen-content-data-left-income-bottom-item-text">
                    <div>区县代理</div>
                    <div>签约率</div>

                    <div>{{(count[state.btnIndex]+2.1).toFixed(2)}}%</div>

                  </div>
                </div>
              </div>
              <div class="screen-content-data-left-income-bottom" v-else>
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_QOQ_total" autoresize />
                  <!-- <div class="screen-content-data-left-income-bottom-item-text">总收益</div> -->
                </div>
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_QOQ_wash" autoresize />
                  <!-- <div class="screen-content-data-left-income-bottom-item-text">
                    <div>团购</div>
                    <div>收益</div>
                  </div> -->
                </div>
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_QOQ_shop" autoresize />
                  <!-- <div class="screen-content-data-left-income-bottom-item-text">
                    <div>商城</div>
                    <div>收益</div>
                  </div> -->
                </div>
                <div class="screen-content-data-left-income-bottom-item">
                  <v-chart :option="income_QOQ_ad" autoresize />
                  <!-- <div class="screen-content-data-left-income-bottom-item-text">
                    <div>广告</div>
                    <div>收益</div>
                  </div> -->
                </div>
              </div>
            </template>
            <template v-else>
              <div class="screen-content-data-left-income-bottom">
                <div class="screen-content-data-left-income-bottom-trend-image"></div>
                <div class="screen-content-data-left-income-bottom-trend">
                  收益趋势需要选择环比分类(今日、本周、本月、本年)
                </div>
              </div>
            </template>
          </div>
          <!--  订单和排行 -->
          <div class="screen-content-data-order-and-rank">
            <div class="screen-content-data-order">
              <div class="screen-content-data-order-top">
                <div class="screen-content-data-order-arrow"></div>
                <div class="screen-content-data-order-right">
                  <div
                    :class="['screen-content-data-left-order-top-right-tab',state.orderType === 1 ? 'left-active' : 'left']"
                    @click="changeType(1,'orderType')">
                    金额
                  </div>
                  <div
                    :class="['screen-content-data-left-order-top-right-tab-active',state.orderType === 1 ? 'right' : 'right-active']"
                    @click="changeType(2,'orderType')">
                    单量
                  </div>
                </div>
              </div>
              <div class="screen-content-data-order-bottom">
                <v-chart :option="order_data" autoresize />
              </div>
            </div>
            <div class="screen-content-data-rank">
              <div class="screen-content-data-rank-top">
                <div class="screen-content-data-rank-arrow"></div>
                <div class="screen-content-data-rank-right">
                  <div
                    :class="['screen-content-data-left-order-top-right-tab',state.rankType === 1 ? 'left-active' : 'left']"
                    @click="changeType(1,'rankType')">
                    团购
                  </div>
                  <div
                    :class="['screen-content-data-left-order-top-right-tab-active',state.rankType === 1 ? 'right' : 'right-active']"
                    @click="changeType(2,'rankType')">
                    商城
                  </div>
                </div>
              </div>
              <div class="screen-content-data-rank-bottom">
                <div class="screen-content-data-rank-list-top">
                  <div class="rank-list-code">设备编号</div>
                  <div class="rank-list-name">设备名称</div>
                  <div class="rank-list-price">累计收入</div>
                </div>

                <div class="screen-content-data-rank-list" v-infinite-scroll="load">
                  <div class="rank-list-item" v-for="(item,index) in state.rank_list" :key="index"
                       :class="[index % 2 === 0 ? 'rank-item-bg-1' : 'rank-item-bg-2']">
                    <div class="rank-list-code">{{ item.machine_code }}</div>
                    <div class="rank-list-name">{{ item.machine_name }}</div>
                    <div class="rank-list-price">{{ formatAmount(item.money) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 订单列表 -->
          <div class="screen-content-data-list">
            <div class="screen-content-data-list-top">
              <div class="screen-content-data-left-income-top-arrow"></div>
              <div class="screen-content-data-list-top-right">
                <div
                  :class="['screen-content-data-left-order-top-right-tab',state.orderListType === 1 ? 'left-active' : 'left']"
                  @click="changeType(1,'orderListType')">
                  团购
                </div>
                <div
                  :class="['screen-content-data-left-order-top-right-tab-active',state.orderListType === 1 ? 'right' : 'right-active']"
                  @click="changeType(2,'orderListType')">
                  商城
                </div>
              </div>
            </div>
            <div class="screen-content-data-list-bottom">
              <div class="screen-content-data-list-bottom-title locate" v-if="state.orderListType === 2">
                <div class="data-list-name">商品名称</div>
                <div class="data-list-num">商品数量</div>
                <div class="data-list-price">单价</div>
                <div class="data-list-time">下单时间</div>
                <div class="data-list-status">订单状态</div>
                <div class="data-list-amount">订单金额</div>
              </div>
              <div class="screen-content-data-list-bottom-title-shop locate" v-if="state.orderListType === 1">
                <div class="data-list-shop-code">设备编号</div>
                <div class="data-list-shop-device-name">设备名称</div>
                <div class="data-list-shop-name">商品名称</div>
                <div class="data-list-shop-time">下单时间</div>
                <div class="data-list-shop-status">订单状态</div>
                <div class="data-list-shop-amount">订单金额</div>
              </div>
              <div class="data-list" v-infinite-scroll="load">
                <template v-if="state.orderListType === 2 && state.order_list.length >= 1">
                  <div class="screen-content-data-list-bottom-title" v-for="(item,index) in state.order_list"
                       :key="index"
                       :class="[index % 2 === 0 ? 'order-item-bg-1': 'order-item-bg-2']">
                    <div class="data-list-name">
                      {{ item.items[0].goods_title }}
                    </div>
                    <div class="data-list-num">
                      {{ item.items[0].goods_num }}
                    </div>
                    <div class="data-list-price">
                      {{ formatAmount(item.items[0].goods_price) }}
                    </div>
                    <div class="data-list-time">{{ item.create_time }}</div>
                    <div class="data-list-status">{{ item.status_text }}</div>
                    <div class="data-list-amount">{{ formatAmount(item.pay_fee) }}</div>
                  </div>
                </template>
                <template v-if="state.orderListType === 1">
                  <div class="screen-content-data-list-bottom-title-shop" v-for="(item,index) in state.order_list"
                       :key="index"
                       :class="[index % 2 === 0 ? 'order-item-bg-1': 'order-item-bg-2']">
                    <div class="data-list-shop-code">{{ item.machine_code }}</div>
                    <div class="data-list-shop-device-name">{{ item.machine.name }}</div>
                    <div class="data-list-shop-name">{{ item.batch_type.val }}</div>
                    <div class="data-list-shop-time">{{ item.create_time }}</div>
                    <div class="data-list-shop-status">{{ item.status.val }}</div>
                    <div class="data-list-shop-amount">{{ formatAmount(item.pay_fee) }}</div>
                  </div>
                </template>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="screen-content-data-order-and-rank">
            <div class="screen-content-data-order">
              <div class="screen-content-data-order-top">
                <div class="screen-content-data-order-arrow"></div>
                <div class="screen-content-data-order-right data-increase"></div>
              </div>
              <div class="screen-content-data-order-bottom">
                <v-chart :option="device_up" autoresize />
              </div>
            </div>
            <div class="screen-content-data-order screen-content-data-status">
              <div class="screen-content-data-order-top">
                <div class="screen-content-data-order-arrow"></div>
                <div class="screen-content-data-order-right data-status"></div>
              </div>
              <div class="screen-content-data-order-bottom">
                <v-chart :option="device_status" autoresize />
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧地图 -->
        <div class="screen-content-data-map">
          <div ref="chartContainer" style="width: 1026px;height: 859px;"></div>
          <div class="screen-content-data-map-income" v-if="state.map_list.length >= 1">
            <div class="screen-content-data-map-box">
              <div class="screen-content-data-map-box-top"></div>
              <div class="screen-content-map-list">
                <div class="screen-content-map-list-item" :style="{marginBottom:index === 9 ? '0px' : '10px'}"
                     v-for="(item,index) in state.map_list" :key="index">
                  <div class="item-rank">{{ index + 1 }}</div>
                  <div class="item-address" v-if="item.province">{{ item.province && item.province.name }}</div>
                  <div class="item-address" v-if="item.city">{{ item.city && item.city.name }}</div>
                  <div class="item-address" v-if="item.area">{{ item.area && item.area.name }}</div>
                  <div class="item-amount">{{ formatAmount(item.amount) }}元</div>
                </div>
              </div>
            </div>
          </div>
          <div class="screen-content-data-back" @click="mapBack" v-show="isShowBack">返回</div>
          <div class="screen-content-data-user" v-if="state.user">
            <div class="screen-content-data-user-left">
              <el-progress type="circle"
                           :percentage="parseFloat(((state.user.active / state.user.sum) * 100).toFixed(1))"
                           :stroke-width="14" color="#D3ECFF" />
            </div>
            <div class="screen-content-data-user-right">
              <div class="screen-content-data-user-right-1">用户活跃数</div>
              <div class="screen-content-data-user-right-2"><span class="number">{{ state.user.sum }}</span><span
                class="text">人</span></div>
              <div class="screen-content-data-user-right-3">今日新增{{ state.user.active }}人</div>
            </div>
          </div>
          <div class="screen-content-data-user" style="bottom: 5px;" v-if="state.machine">
            <div class="screen-content-data-user-left">
              <el-progress type="circle"
                           :percentage="parseFloat(((state.machine.use / state.machine.sum) * 100).toFixed(0))"
                           :stroke-width="14" color="#D3ECFF" />
            </div>
            <div class="screen-content-data-user-right">
              <div class="screen-content-data-user-right-1">营业中商铺</div>
              <div class="screen-content-data-user-right-2"><span class="number">{{ state.machine.sum }}</span><span
                class="text">家</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <CustomModal ref="customModal">
      <div class="modal-box" v-if="state.showType=== 'info'"
           :class="[state.device_details.show_bg === 1 ? 'modal-box-bg-1' : state.device_details.show_bg === 2 ? 'modal-box-bg-2' : state.device_details.show_bg === 4 ? 'modal-box-bg-3' : 'modal-box-bg-4']">
        <div class="modal-box-close" @click="closeModal"></div>
        <div class="modal-box-device-info">
          <img :src="checkUrl(state.device_details.image)" alt="" class="modal-box-device-info-image">
          <div class="modal-box-device-info-text">
            <div class="device-name">设备名称：{{ state.device_details.name }}</div>
            <div class="device-code">设备编号：{{ state.device_details.code }}</div>
            <div class="device-organize">所属组织：{{ state.device_details.organize.name }}</div>
            <div class="device-address">设备位置：{{ state.device_details.position }}</div>
          </div>
        </div>
        <div class="modal-box-device-status">
          <div class="modal-box-device-status-top modal-device-status"></div>
          <div class="modal-box-device-status-bottom">
            <div class="modal-box-device-status-bottom-box">
              <div class="modal-box-device-status-bottom-box-item details-bg-1">
                <div>
                  {{ state.device_details.record['voltage'] ? `${state.device_details.record['voltage'].value}V` : '未知'
                  }}
                </div>
              </div>
              <div class="modal-box-device-status-bottom-box-item details-bg-2">
                <div>
                  {{ state.device_details.record['current'] ? `${state.device_details.record['current'].value}A` : '未知'
                  }}
                </div>
              </div>
              <div class="modal-box-device-status-bottom-box-item details-bg-3">
                <div>
                  {{ state.device_details.record['temperature'] ? `${state.device_details.record['temperature'].value}°C` : '未知'
                  }}
                </div>
              </div>
              <div class="modal-box-device-status-bottom-box-item details-bg-4">
                <div>{{ state.device_details.record['water'] ? `${state.device_details.record['water'].value}m³` : '未知'
                  }}
                </div>
              </div>
              <div class="modal-box-device-status-bottom-box-item details-bg-5">
                <div>
                  {{ state.device_details.record['electricity'] ? `${state.device_details.record['electricity'].value}KWH` : '未知'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-box-device-status">
          <div class="modal-box-device-status-top modal-income-bg"></div>
          <div class="modal-box-device-status-bottom">
            <div class="modal-box-device-status-bottom-pie">
              <div class="modal-box-device-status-bottom-pie-item">
                <v-chart :option="device_details_total" autoresize />
              </div>
              <div class="modal-box-device-status-bottom-pie-item">
                <v-chart :option="device_details_wash" autoresize />
              </div>
              <div class="modal-box-device-status-bottom-pie-item">
                <v-chart :option="device_details_shop" autoresize />
              </div>
              <div class="modal-box-device-status-bottom-pie-item">
                <v-chart :option="device_details_ad" autoresize />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-box-device-status">
          <div class="modal-box-device-status-top modal-order-bg">
            <div class="modal-order-more" @click="goOrder">
              <div class="modal-order-more-text">查看更多</div>
              <div class="modal-order-more-arrow"></div>
            </div>
          </div>
          <div class="modal-order-box">
            <div class="modal-order-list-item-top">
              <div class="modal-list-item-name">商品名称</div>
              <div class="modal-list-item-sum">订单金额</div>
              <div class="modal-list-item-time">下单时间</div>
              <div class="modal-list-item-status">订单状态</div>
              <div class="modal-list-item-way">支付方式</div>
            </div>
            <div class="modal-order-list">
              <div class="modal-order-list-item" v-for="(item,index) in state.device_details.list" :key="index"
                   :class="[index % 2 === 0 ? 'order-item-bg-1': 'order-item-bg-2']">
                <div class="modal-list-item-name">{{ item.batch_type.val }}</div>
                <div class="modal-list-item-sum">{{ formatAmount(item.pay_fee) }}</div>
                <div class="modal-list-item-time">{{ item.create_time }}</div>
                <div class="modal-list-item-status">{{ item.status.val }}</div>
                <div class="modal-list-item-way">微信支付</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-error-box"
           :class="[state.type === 'fault' ? 'modal-error-box-bg' : state.type === 'scram' ? 'modal-error-box-bg-3' : 'modal-error-box-bg-2']"
           v-if="state.showType === 'record'">
        <div class="modal-error-box-close" @click="closeModal"></div>
        <div class="modal-error-box-list">
          <div class="modal-error-box-list-top">
            <div class="modal-error-box-list-item">
              <div class="modal-error-item-code">设备编号</div>
              <div class="modal-error-item-name">设备名称</div>
              <div class="modal-error-item-feedback">
                {{ state.type === 'fault' ? '故障反馈' : state.type === 'scram' ? '紧停类型' : '缺货类型' }}
              </div>
              <div class="modal-error-item-fault">
                {{ state.type === 'fault' ? '故障时间' : state.type === 'scram' ? '紧停时间' : '缺货时间' }}
              </div>
              <div class="modal-error-item-recover">恢复时间</div>
              <div class="modal-error-item-status">当前状态</div>
            </div>
          </div>
          <div class="modal-box-error-box-list-bottom" v-loading="state.loading">
            <el-empty :image-size="200" v-if="state.record_list.length < 1 && !state.loading" />
            <template v-if="state.record_list.length > 1 && !state.loading">
              <div class="modal-error-box-list-item" v-for="(item,index) in state.record_list" :key="index"
                   :class="[index % 2 === 0 ? 'order-item-bg-1': 'order-item-bg-2']">
                <div class="modal-error-item-code">{{ item.machine_code }}</div>
                <div class="modal-error-item-name">{{ item.machine.name }}</div>
                <div class="modal-error-item-feedback">{{ item.description }}</div>
                <div class="modal-error-item-fault">{{ item.create_time }}</div>
                <div class="modal-error-item-recover">----</div>
                <div class="modal-error-item-status">---</div>
              </div>
            </template>
          </div>
        </div>
        <div class="modal-error-page">
          <el-pagination
            :background="false"
            layout="prev, pager, next, jumper"
            :total="state.total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </CustomModal>
    <!-- <el-cascader :show-all-levels="false" :options="options" :props="props"></el-cascader> -->
  </div>
</template>

<script setup>
  import { onBeforeMount, onMounted, onUnmounted, reactive, ref, computed } from 'vue';
  import VChart from 'vue-echarts';
  import * as echarts from 'echarts';
  import {
    getJson,
    income,
    income_rank,
    api_order_data,
    reade_amount,
    api_order_list,
    api_device_up,
    api_device_status,
    api_map_rank, record_data, map_poi, map_level, api_device_details, api_user, api_device_num, api_is_exist,
  } from './api.js';
  import { registerMap } from 'echarts/core';
  import CustomModal from './customModal.vue';
  import dayjs from 'dayjs';
  import cCascader from './componenets/c-cascader/c-cascader.vue';
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import WebSocketClient from './websocket';
  import { useRouter } from 'vue-router';
  import { api as apiArea } from '../../admin/data/data.service.js';

  const router = useRouter();

  const isShowBack = computed(() => {
    return mapList.value.length !== 0;
  });

  const dataM=[
  [
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
  ],
  [
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
  ],
  [
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
  ],
  [
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
    [
      {role: 1, name: '', value: 0},
      {role: 3, name: '', value: 0},
      {role: 4, name: '', value: 0},
    ],
  ]
  ]
  const count=[
    8.3,7.7,6.9,11.2,15.6
  ]
  var options=ref([])
  const props={
    label:'name',
    value:'id'
  }

// 获取地区树
async function getArea(){
  const { data } = await apiArea.area.select();
  console.log(data)
  options.value=data
}




  const weather = ref({
    drizzle: {
      name: '小雨',
      icon: './static/images/screen/weather/drizzle.png',
    },
    deluge: {
      name: '大雨',
      icon: './static/images/screen/weather/deluge.png',
    },
    snow: {
      name: '雪',
      icon: './static/images/screen/weather/snow.png',
    },
    rainstorm: {
      name: '阵雨',
      icon: './static/images/screen/weather/rainstorm.png',
    },
    fineday: {
      name: '晴天',
      icon: './static/images/screen/weather/fineday.png',
    },
    hail: {
      name: '冰雹',
      icon: './static/images/screen/weather/hail.png',
    },
    hailstorm: {
      name: '大冰雹',
      icon: './static/images/screen/weather/hailstorm.png',
    },
    cloudy: {
      name: '阴天',
      icon: './static/images/screen/weather/cloudy.png',
    },
    cloudytosunny: {
      name: '多云转晴',
      icon: './static/images/screen/weather/cloudytosunny.png',
    },
    overcast: {
      name: '多云',
      icon: './static/images/screen/weather/overcast.png',
    },
  });
  // map实例
  const chartContainer = ref(null);
  const customModal = ref(null);
  const startTime = ref(null);
  const endTime = ref(null);
  //记录地图
  const mapList = ref([]);

  const state = reactive({
    btnIndex:0,
    incomeType: 1,
    orderType: 1,
    rankType: 1,
    orderListType: 1,
    isBlink: false,
    dialogTableVisible: true,
    begin_time: '',
    end_time: '',
    show_time: {},
    time_index: 'month',
    params: {
      begin_time: '',
      end_time: '',
    },
    amount: '',
    rank_list: [],
    order_list: [],
    map_list: [],
    record_list: [],
    total: 0,
    page: 1,
    loading: false,
    type: '',
    poi: [],
    showType: '',
    showIncomeType: 1,
    device_details: {},
    user: null,
    machine: null,
    time: null,
    chartInstance: null,
    warn: null,
  });

  // 总收益
  const income_total = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(14),
      },
      formatter: function(params) {
        return `${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '总收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(14),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  // 团购收益
  const income_wash = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(14),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '团购收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(14),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  // 商城收益
  const income_shop = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(14),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '商城收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(14),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  // 广告收益
  const income_ad = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(14),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '线上收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(14),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  // 订单数据
  const order_data = reactive({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#57617B',
        },
      },
      formatter: function(params) {
        return params.map(param => {
          return `${param.seriesName}: ${param.value}     ${state.orderType === 1 ? '元' : '单'}`;
        }).join('<br/>');
      },
    },
    legend: {
      icon: 'rect',
      itemWidth: 14,
      itemHeight: 5,
      itemGap: 13,
      data: ['团购', '商城'],
      left: 'center',
      orient: 'horizontal',
      textStyle: {
        fontSize: nowSize(14),
        color: '#D1E1FF',
        height: 11,
        rich: {
          a: {
            verticalAlign: 'middle',
          },
        },
      },
      padding: [12, 0, 0, 0],
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#D1E1FF',
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: nowSize(12),
        },
      },
      data: [],
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: true,
        inside: true,
      },
      axisLine: {
        lineStyle: {
          color: '#57617B',
        },
      },
      axisLabel: {
        margin: 5,
        textStyle: {
          fontSize: nowSize(12),
          color: '#D1E1FF',
        },
      },
      splitLine: {
        show: false,
      },
    }],
    series: [{
      name: '团购',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(74, 222, 189, 1)',
          }, {
            offset: 0.8,
            color: 'rgba(74, 222, 189, 0)',
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10,
        },
      },
      itemStyle: {
        normal: {
          color: 'rgba(74, 222, 189, 1)',
          borderColor: 'rgba(74, 222, 189, 1)',
          borderWidth: 12,
        },
      },
      data: [],
    }, {
      name: '商城',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(113, 176, 225, 1)',
          }, {
            offset: 0.8,
            color: 'rgba(113, 176, 225, 0)',
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10,
        },
      },
      itemStyle: {
        normal: {
          color: 'rgba(113, 176, 225, 1)',
          borderColor: 'rgba(113, 176, 225, 1)',
          borderWidth: 12,

        },
      },
      data: [],
    }],
  });
  // 设备增长
  const device_up = reactive({
    grid: {
      left: '1%',
      right: '8%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#D1E1FF',
          },
        },
        data: [],
        axisLabel: {
          fontSize: nowSize(12),
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        axisTick: {
          show: true,
          inside: true,
        },
        axisLine: {
          lineStyle: {
            color: '#57617B',
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          margin: 5,
          textStyle: {
            fontSize: nowSize(12),
            color: '#D1E1FF',
          },
        },
      },
    ],
    series: [
      {
        name: '',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        symbol: 'none',
        emphasis: {
          focus: 'series',
        },
        data: [],
      },
    ],
  });
  // 设备状态
  const device_status = reactive({
    tooltip: {},
    legend: {
      icon: 'rect',
      itemWidth: 14,
      itemHeight: 5,
      itemGap: 13,
      data: ['使用数', '故障数', '紧停数'],
      left: 'center',
      orient: 'horizontal',
      textStyle: {
        fontSize: nowSize(12),
        color: '#D1E1FF',
        height: 11,
        rich: {
          a: {
            verticalAlign: 'middle',
          },
        },
      },
      padding: [12, 0, 0, 0],
    },
    grid: {
      left: '1%',
      right: '5%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#D1E1FF',
        },
      },
      data: [],
      axisLabel: {
        textStyle: {
          fontSize: nowSize(12),
        },
      },
    },
    yAxis: {

      axisTick: {
        show: true,
        inside: true,
      },
      axisLine: {
        lineStyle: {
          color: '#57617B',
        },
      },
      axisLabel: {
        margin: 5,
        textStyle: {
          fontSize: nowSize(12),
          color: '#D1E1FF',
        },
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '使用数',
        type: 'bar',
        color: '#4ADEBD',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#4ADEBD',
            }, {
              offset: 1,
              color: 'rgba(216, 216, 216, 0)',
            }]),
          },
        },
        data: [],
      },
      {
        name: '故障数',
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FF4F4F',
            }, {
              offset: 1,
              color: 'rgba(216, 216, 216, 0)',
            }]),
          },
        },
        data: [],
      },
      {
        name: '紧停数',
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#F9C900',
            }, {
              offset: 1,
              color: 'rgba(216, 216, 216, 0)',
            }]),
          },
        },
        data: [],
      },
    ],
  });
  // 地图配置
  const mapOptions = reactive({
    geo: {
      map: 'map',
      zoom: 1.1,
      roam: true,
      left: '10%',
      top: '15%',
      tooltip: {
        trigger: 'item',
        textStyle: {
          fontSize: nowSize(12),
        },
        formatter: (p) => {
          let val = p.value[2];
          if (window.isNaN(val)) {
            val = 0;
          }
          return p.name;
        },
      },
      emphasis: {
        areaStyle: {
          color: 'rgba(255,255,255,0.3)',
        },
        label: {
          show: true,
          color: '#f75a00',
        },
        itemStyle: {
          areaColor: '#8dd7fc',
          borderWidth: 1.6,
          shadowBlur: 25,
        },
      },
      label: {
        show: true,
        color: '#fff', //省份标签字体颜色
        fontSize: nowSize(14),
        formatter: p => {
          switch (p.name) {
            case '内蒙古自治区':
              p.name = '内蒙古';
              break;
            case '西藏自治区':
              p.name = '西藏';
              break;
            case '新疆维吾尔自治区':
              p.name = '新疆';
              break;
            case '宁夏回族自治区':
              p.name = '宁夏';
              break;
            case '广西壮族自治区':
              p.name = '广西';
              break;
            case '香港特别行政区':
              p.name = '香港';
              break;
            case '澳门特别行政区':
              p.name = '澳门';
              break;

          }
          return p.name;
        },
      },
      itemStyle: {
        areaColor: '#24CFF4',
        borderColor: '#53D9FF',
        borderWidth: 1.3,
        shadowBlur: 15,
        shadowColor: 'rgb(58,115,192)',
        shadowOffsetX: 7,
        shadowOffsetY: 6,
      },
    },
    series: [{
      name: '',
      type: 'map',
      geoIndex: 0,
      map: 'china',
      roam: true,
      zoom: 1.1,
      selectedMode:false,
      tooltip: {
        trigger: 'item',
        textStyle: {
          fontSize: nowSize(12),
        },
        formatter: p => {
          let val = p.value;
          if (p.name === '南海诸岛') return;
          if (window.isNaN(val)) {
            val = 0;
          }
          return p.name;
        },
      },
      label: {
        show: false,
      },
      data: [],
    },
      {
        name: '散点',
        type: 'effectScatter',
        coordinateSystem: 'geo',
        rippleEffect: {
          brushType: 'fill',
        },
        itemStyle: {
          normal: {
            color: function(params) {
              // params 对象包含了当前数据项的信息
              // 通过 params.data.color 获取对应的颜色值
              return params.data.color;
            },
            shadowBlur: 10,
            shadowColor: '#333',
          },
        },
        data: [],
        symbolSize: 27,
        showEffectOn: 'render', //加载完毕显示特效
      },
    ],
  });
  // 环比数据
  const income_QOQ_total = reactive({
    color: [
      '#598AB0',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '总收益',
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  const income_QOQ_wash = reactive({
    color: [
      '#598AB0',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '团购收益',
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  const income_QOQ_shop = reactive({
    color: [
      '#598AB0',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '商城收益',
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });
  const income_QOQ_ad = reactive({
    color: [
      '#598AB0',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '线上收益',
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });

  const device_details_total = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '总收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(12),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });

  const device_details_wash = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '团购收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(12),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });

  const device_details_shop = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '商城收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(12),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });

  const device_details_ad = reactive({
    color: [
      '#71B0E1',
      '#598AB0',
      '#3A5B75',
    ],
    tooltip: {
      trigger: 'item',
      textStyle: {
        fontSize: nowSize(12),
      },
      formatter: function(params) {
        return `${params.seriesName} <br/>${params.name} <br/> ${params.value}元 ${params.percent}%`;
      },
    },
    series: [
      {
        name: '线上收益',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: false,
          position: 'inside',
          formatter: '{b}',
          textStyle: {
            color: '#fff',
            fontSize: nowSize(12),
          },
          rich: {
            d: {
              padding: [5, 0, 0, 0],
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [],
      },
    ],
  });

  const client = new WebSocketClient('wss://cutepet.liuliangbenben.com/ws');

  onBeforeMount(async () => {
    initTime();
    await getPoi('');
    await initEchartsMap();
  });

  onMounted(async () => {
    handleScreenAuto();
    window.addEventListener('resize', handleScreenAuto);
    window.addEventListener('fullscreenchange', handleFullscreen);
    client.on('message', handleMessage);

    //获取区域列表
    getArea()
  });

  onUnmounted(() => {
    if (state.chartInstance) {
      state.chartInstance.dispose();
      state.chartInstance.off('click', echartsMapClick);
    }
    state.time = null;
    client.disconnect();
    window.removeEventListener('resize', handleScreenAuto);
    window.removeEventListener('fullscreenchange', handleFullscreen);
  });

  const handleMessage = (data) => {
    if (state.isBlink) {
      return;
    }
    if (data.length > 0) {
      const firstItemType = data[0].type;
      // 根据type的值直接设定warn，并判断是否需要开启闪烁
      state.warn = firstItemType === 256 ? 2 : (firstItemType !== 0 ? 1 : null);
      state.isBlink = state.warn > 0; // 只有当warn有值时才开启闪烁
    }
  };

  const handleFullscreen = () => {
    if (!document.fullscreenElement) {
      router.back();
    }
  };

  const formatAmount = (amount) => {
    return Number(amount).toLocaleString('en-US');
  };

  const initTime = async () => {
    state.show_time.current = dayjs().format('HH:mm:ss');
    state.show_time.week = dayjs().format('dddd');
    state.show_time.year = dayjs().format('YYYY-MM-DD');

    const today = dayjs(); // 获取当前日期
    const firstDayOfMonth = dayjs().startOf('month'); // 获取本月第一天
    const isFirstDay = today.isSame(firstDayOfMonth, 'day');

    if (isFirstDay) {
      state.time_index = 'today';
      state.params.begin_time = dayjs().format('YYYY-MM-DD 00:00:00');
      state.params.end_time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    } else {
      state.time_index = 'month';
      state.params.begin_time = dayjs().startOf('month').format('YYYY-MM-DD 00:00:00');
      state.params.end_time = dayjs().format('YYYY-MM-DD HH:mm:ss');
    }
    state.time = setInterval(() => {
      state.show_time.current = dayjs().format('HH:mm:ss');
    }, 1000);
    getTotalAmount();
    getOrderList();
    getIncomeRank();
    getUser();
    getMachine();
    getMachineStatus();
    getIncomeData();
    getOrderData();
    getMachineUp();
    getMapRank('');
  };

  const getUser = async () => {
    const { error, data } = await api_user();
    if (error === 0) {
      state.user = data;
    }
  };

  const getMachine = async () => {
    const { error, data } = await api_device_num();
    if (error === 0) {
      state.machine = data;
    }
  };

  const getLevel = async (params) => {
    const { error, data } = await map_level({
      name: params.data.name,
    });
    if (error === 0) {
      await getPoi(data.id, params.data.level);
      if (params.data.level !== 'district') {
        await getMapRank(data.id, params.data.level);
      }
    }
  };

  const getPoi = async (adcode, type = 'all') => {
    const { error, data } = await map_poi({
      area_id: adcode,
      area_type: type,
    });
    if (error === 0) {
      state.poi = data;
      mapOptions.series[1].data = data.map(item => {
        let color;
        if (item.fault_status !== '没有故障') {
          // 先判断是否有故障
          color = item.fault_status === '急停被按下' ? '#F98900' : '#FDAFAF';
        } else if (item.warning !== '') {
          // 若无故障，再判断是否有异常
          color = '#F9C900';
        } else {
          // 既没有故障也没有异常，表示正常运行
          color = '#AFDBFD';
        }
        return {
          name: item.name,
          value: [item.lng, item.lat, ''],
          adcode: item.area_id,
          color: color,
          id: item.id,
        };
      });
    }
  };

  const getOrderData = async () => {
    const { error, data } = await api_order_data({
      format: state.time_index,
      order_option: state.orderType === 1 ? 'money' : 'num',
      ...state.params,
    });

    if (error === 0) {
      const { x, line: { bathe, goods } } = data;
      order_data.xAxis[0].data = x.map(handleXAxisFormatter());
      // 更新series数据，这部分逻辑相同，所以不需要根据time_index区分
      order_data.series[0].data = Object.values(bathe);
      order_data.series[1].data = Object.values(goods);
    }
  };

  const getIncomeRank = async () => {
    const { error, data } = await income_rank({
      type: state.rankType === 1 ? 'device' : 'shop',
    });
    if (error === 0) {
      state.rank_list = data;
    }
  };

  // 获取收益数据
  const getIncomeData = async () => {
    const options = ['total', 'toiletry', 'shop', 'ad'];
    const incomeCategories = ['total', 'wash', 'shop', 'ad'];
    const incomeMapping = {
      total: income_total,
      wash: income_wash,
      shop: income_shop,
      ad: income_ad,
    };
    const results = await Promise.all(options.map(async (option) => {
      const response = await income({
        type: state.incomeType === 1 ? 'sort' : 'trend',
        format: state.time_index,
        option,
        ...state.params,
      });
      console.log('response',response)
      // response.data[0].name='线上收益'
      // response.data[1].name='线下收益'
      // response.data[2].name='团购收益'

      return { error: response.error, data: response.data };
    }));

    if (state.incomeType === 1) {
      const updateIncomes = (results, incomeMapping) => {
        incomeCategories.forEach((category, index) => {
          if (results[index] && results[index].error === 0) {
            // incomeMapping[category].series[0].data = results[index].data;
            incomeMapping[category].series[0].data = dataM[index][state.btnIndex];

          }
        });
      };
      console.log(incomeMapping)
      updateIncomes(results, incomeMapping);
    } else {
      await processResult(results, 0, income_QOQ_total);
      await processResult(results, 1, income_QOQ_wash);
      await processResult(results, 2, income_QOQ_shop);
      await processResult(results, 3, income_QOQ_ad);
    }

  };

  // 处理每一个环比数据
  const processResult = async (results, resultIndex, incomeSeries) => {
    const day = {
      'today': '今日',
      'month': '本月',
      'week': '本周',
      'year': '本年',
    };

    const before_day = {
      'today': '昨日',
      'month': '上月',
      'week': '上周',
      'year': '上年',
    };
    if (results[resultIndex].error === 0) {
      const status = calculateGrowthStatus(results[resultIndex].data.Lately, results[resultIndex].data.data);
      const text = `${status} ${growthPercentage(results[resultIndex].data.Lately, results[resultIndex].data.data)}%`;
      const option = {
        value: results[resultIndex].data.data,
        name: day[state.time_index],
        itemStyle: {
          color: results[resultIndex].data.data > results[resultIndex].data.Lately ? '#19B366' : results[resultIndex].data.data < results[resultIndex].data.Lately ? '#FA5151' : '#598AB0',
        },
        label: {
          show: true,
          position: 'inside',
          formatter: () => text,
          textStyle: {
            fontSize: nowSize(12),
            color: '#fff',
          },
        },
      };
      incomeSeries.series[0].data = [
        { value: results[resultIndex].data.Lately, name: before_day[state.time_index] },
        option,
      ];
    }
  };

  // 计算环比增长百分比
  const growthPercentage = (previousValue, currentValue) => {
    if (previousValue === 0 && currentValue !== 0) {
      return '100';
    } else if (currentValue === previousValue) {
      return '0';
    } else if (currentValue === 0 && previousValue !== 0) {
      return '100';
    }
    const growthRate = ((currentValue - previousValue) / previousValue) * 100;
    return growthRate.toFixed(2);
  };

  // 环比增长文案
  const calculateGrowthStatus = (previousValue, currentValue) => {
    if (currentValue > previousValue) {
      return '环比增长';
    } else if (currentValue < previousValue) {
      return '环比下降';
    } else {
      return '不变';
    }
    // 昨日 大于 今日  环比下降
    // 昨日 小于 今日  环比增长
    // 昨日 等于 今日 不变
  };


  // 处理x轴数据
  const handleXAxisFormatter = () => {
    let xAxisFormatter;
    switch (state.time_index) {
      case 'today':
        xAxisFormatter = item => `${item}:00`;
        break;
      case 'month':
      case 'week':
        xAxisFormatter = item => `${item}`;
        break;
      case 'year':
        xAxisFormatter = item => `${item}`;
        break;
      case 'custom':
        xAxisFormatter = item => `${item}`;
        break;
      default:
        throw new Error(`Unsupported time_index: ${state.time_index}`);
    }
    return xAxisFormatter;
  };

  // 获取交易额总数据
  const getTotalAmount = async () => {
    const { error, data } = await reade_amount();
    if (error === 0) {
      state.amount = data.amount;
    }
  };


  // 获取订单列表数据
  const getOrderList = async () => {
    const { error, data } = await api_order_list({
      type: state.orderListType === 1 ? 'bathe' : 'goods',
      ...state.params,
    });

    if (error === 0) {
      state.order_list = data;
    }
  };

  // 获取设备增长数据
  const getMachineUp = async () => {
    const { error, data } = await api_device_up({
      format: state.time_index,
      ...state.params,
    });

    if (error === 0) {
      device_up.xAxis[0].data = data.x.map(handleXAxisFormatter());
      device_up.series[0].data = Object.values(data.line);
    }
  };


  // 获取设备状态数据
  const getMachineStatus = async () => {
    const { error, data } = await api_device_status({
      format: state.time_index,
      ...state.params,
    });
    if (error === 0) {
      device_status.xAxis.data = data.x.map(handleXAxisFormatter());
      device_status.series[0].data = Object.values(data.line.going);
      device_status.series[1].data = Object.values(data.line.error);
      device_status.series[2].data = Object.values(data.line.infault);
    }
  };

  // 获取省市排行数据
  const getMapRank = async (id, type = 'all') => {
    const { error, data } = await api_map_rank({
      area_type: type,
      area_id: id,
    });

    if (error === 0) {
      state.map_list = data;
    }
  };

  const mapBack = async () => {
    state.chartInstance.clear();
    if (mapList.value[mapList.value.length - 2]) {
      await getLevel(mapList.value[mapList.value.length - 2].params);
      await getMapJson(mapList.value[mapList.value.length - 2].mapName);
    } else {
      await getPoi('');
      await getMapJson('100000_full');
      await getMapRank('');
    }
    mapList.value.pop();
  };

  // 初始化地图
  const initEchartsMap = async () => {
    await getMapJson('100000_full');
  };

  // 获取地图json数据
  const getMapJson = async (code) => {
    const { error, data } = await getJson({
      code,
    });
    registerMap('map', { geoJSON: data });
    if (error === 0) {
      // 加载 mapJson数据
      state.chartInstance = echarts.init(chartContainer.value)
      mapOptions.series[0].data = data.features.map((item) => {
        const tempValue = item.properties.center ? [...item.properties.center] : item.properties.center;
        let value = Math.random() * 3000;
        return {
          name: item.properties.name,
          value: tempValue, // 中心点经纬度
          adcode: item.properties.adcode, // 区域编码
          level: item.properties.level, // 层级
        };
      });
      state.chartInstance.setOption(mapOptions);
      state.chartInstance.on('click', echartsMapClick);
    }
  };
  const getIsExist = async (name, level) => {
    const { error, data } = await api_is_exist({
      name: name,
      level: level,
    });
    return data
  };

  // 下钻
  const echartsMapClick = async (params) => {
    if (params.seriesType === 'map') {
      const { adcode, level } = params.data;
      const mapName = level === 'district' ? adcode : adcode + '_full';
      const data = await getIsExist(params.data.name,level)
      if (data.num <= 0) {
        return
      }
      // 防止最后一个层级被重复点击，返回上一级出错
      if (mapList.value[mapList.value.length - 1] && mapList.value[mapList.value.length - 1].mapName === mapName) {
        return;
      }
      mapList.value.push({
        mapName: mapName,
        params: params,
      });
      state.chartInstance.clear();
      await getLevel(params);
      await getMapJson(mapName);
    } else {
      state.showType = 'info';
      await getDetailsData(params.data.id);
      customModal.value.openModal();
    }
  };

  const getDetailsData = async (id) => {
    const { error, data } = await api_device_details(id);

    if (error === 0) {
      let show_bg;
      if (data.fault_status !== '没有故障') {
        // 先判断是否有故障
        show_bg = data.fault_status === '急停被按下' ? 4 : 2;
      } else if (data.warning !== '') {
        // 若无故障，再判断是否有异常
        show_bg = 3;
      } else {
        // 既没有故障也没有异常，表示正常运行
        show_bg = 1;
      }
      state.device_details = data;
      state.device_details.show_bg = show_bg;
      let obj = [];
      let obj2 = [];
      let obj3 = [];
      let obj4 = [];
      for (let key in data.total) {
        obj.push({
          name: key === 'ad' ? '线上收益' : key === 'bathe' ? '线下收益' : '团购收益',
          value: data.total[key] || 0,
        });
      }
      for (let key in data.bathe) {
        obj2.push({
          name: key === 'area' ? '线上收益' : key === 'city' ? '线下收益' : '团购收益',
          value: data.bathe[key] || 0,
        });
      }
      for (let key in data.shop) {
        obj3.push({
          name: key === 'area' ? '线上收益' : key === 'city' ? '线下收益' : '团购收益',
          value: data.shop[key] || 0,
        });
      }
      for (let key in data.ad) {
        obj4.push({
          name: key === 'area' ? '线上收益' : key === 'city' ? '线下收益' : '团购收益',
          value: data.shop[key] || 0,
        });
      }

      
      device_details_total.series[0].data = obj;
      device_details_wash.series[0].data = obj2;
      device_details_shop.series[0].data = obj3;
      device_details_ad.series[0].data = obj4;
    }
  };


  const handleScreenAuto = () => {
    const designDraftWidth = 1920;
    const designDraftHeight = 1080;
    const scale = document.documentElement.clientWidth / document.documentElement.clientHeight < designDraftWidth / designDraftHeight ? document.documentElement.clientWidth / designDraftWidth : document.documentElement.clientHeight / designDraftHeight;
    document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%, -50%)`;
  };


  const load = () => {
  };


  const changeWarn = () => {
    state.isBlink = false;
  };


  const changeType = (index, type) => {
    if (index === state[type]) {
      return false;
    }
    state[type] = index;

    if (type === 'incomeType') {
      if (state.time_index !== 'custom') {
        getIncomeData();
      } else {
        if (state[type] === 1) {
          state.showIncomeType = 1;
          getIncomeData();
        } else {
          state.showIncomeType = 2;
        }
      }
    }

    if (type === 'orderType') {
      getOrderData();
    }

    if (type === 'rankType') {
      getIncomeRank();
    }

    if (type === 'orderListType') {
      state.order_list = [];
      getOrderList();
    }
  };

  const changeTime = (type) => {
    if (type === 'start') {
      startTime.value.focus();
    } else {
      endTime.value.focus();
    }
  };

  const changeTimeType = async (type) => {
    state.time_index = type;
    const dateRanges = {
      today: () => ({
        start: dayjs().format('YYYY-MM-DD 00:00:00'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }),
      week: () => ({
        start: dayjs().startOf('week').format('YYYY-MM-DD 00:00:00'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }),
      month: () => ({
        start: dayjs().startOf('month').format('YYYY-MM-DD 00:00:00'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }),
      year: () => ({
        start: dayjs().startOf('year').format('YYYY-MM-DD 00:00:00'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }),
    };
    state.params.begin_time = dateRanges[state.time_index]().start;
    state.params.end_time = dateRanges[state.time_index]().end;
    state.order_list = [];
    await getMachineStatus();
    getIncomeData();
    getOrderData();
    getMachineUp();
    getOrderList();
  };

  const openError = async (type) => {
    state.showType = 'record';
    state.type = type;
    state.record_list = [];
    customModal.value.openModal();
    getRecordList();
  };


  const closeModal = () => {
    customModal.value.closeModal();
  };


  const getRecordList = async () => {
    state.loading = true;
    const { error, data } = await record_data({
      type: state.type,
      list_rows: 10,
      page: state.page,
    });

    state.loading = false;
    if (error === 0) {
      state.record_list = data.data;
      state.total = data.total;
    }
  };


  const handleCurrentChange = (e) => {
    state.page = e;
    getRecordList();
  };


  const changeStartTime = async () => {
    state.time_index = 'custom';
    state.params.begin_time = state.begin_time;
    if (state.begin_time && state.end_time) {
      state.order_list = [];
      if (state.incomeType === 1) {
        await getIncomeData();
      } else {
        state.showIncomeType = 2;
      }
      getOrderList();
      await getMachineStatus();
      await getOrderData();
      await getMachineUp();

    }
  };

  const changeEndTime = async () => {
    state.time_index = 'custom';
    state.params.end_time = state.end_time;
    if (state.begin_time && state.end_time) {
      state.order_list = [];
      if (state.incomeType === 1) {
        await getIncomeData();
      } else {
        state.showIncomeType = 2;
      }
      getOrderList();
      await getMachineStatus();
      await getOrderData();
      await getMachineUp();

    }
  };

  function nowSize(val) {
    // 当前页面宽度相对于 设计图 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面字体大小
    return (val * Math.min(scale, 2));
  }

  const goOrder = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
    customModal.value.closeModal();
    setTimeout(() => {
      router.push('/shop/admin/care/order');
    }, 500);
  };
</script>

<style scoped lang="scss">
  @import "@/assets/css/utils.scss";


  :deep() .echarts-inner {
    position: relative !important;
    z-index: 999 !important;
  }

  :deep() .number,
  :deep() .more {
    color: #FFFFFF;
    background-color: transparent;
  }

  :deep() .el-pager li.is-active {
    color: #37547C !important;
  }

  :deep() .el-pagination button {
    background-color: transparent;
    color: #CECECE;
  }

  :deep() .el-pager li:hover {
    color: #37547C !important;
  }

  :deep() .el-pagination__goto,
  :deep() .el-pagination__classifier {
    color: #fff;
  }

  :deep() .el-input__wrapper {
    background-color: transparent;
    box-shadow: 0 0 0 1px #D9D9D9 inset;

  }

  :deep() .el-input__inner {
    color: #FFFFFF;
  }

  :deep() .el-empty__description p {
    color: #FFFFFF !important;
  }

  :deep() .el-progress-circle {
    width: 100px !important;
    height: 100px !important;
  }

  :deep(.el-progress-circle__track) {
    stroke: transparent !important;
  }

  :deep() .el-progress__text {
    font-size: 25px !important;
    font-weight: normal;
    color: #FFFFFF;
  }

  :deep() .echarts {
    position: relative !important;
    z-index: 999 !important;
  }

  div {
    font-family: PingFang SC;
    box-sizing: border-box;
  }

  .screen-box {
    width: 100%;
    height: 100%;
    background: #031938;
  }
  .qianyve{
    position: absolute;
    left: 20px;
    top: 80px;
  }
  .screen-content {
    background-image: url("/static/images/screen/screen-bg.png");
    background-size: 100% 100%;
    display: inline-block;
    width: 1920px; //设计稿的宽度
    height: 1080px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;

    .screen-header {
      width: 1920px;
      height: 188px;
      position: relative;
      background-image: url('/static/images/screen/screen-top-bg2.png');
      background-size: 100% 100%;

      .screen-header-top {
        width: 1920px;
        height: 188px;
        position: relative;

        .screen-header-top-weather {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          left: 2px;
          top: 25.5px;
          padding-left: 10px;

          .screen-header-top-weather-image {
            width: 50px;
            height: 50px;
            background-image: url('/static/images/screen/weather/fineday.png');
            background-size: 100% 100%;
          }

          .screen-header-top-weather-text {
            font-size: 20px;
            font-weight: 600;
            color: #D1E1FF;
          }
        }


        .screen-header-top-time {
          display: flex;
          position: absolute;
          right: 44px;
          top: 33.5px;

          .today-time {
            font-size: 40px;
            color: #FAFAFA;
            margin-right: 30px;
          }

          .year-time-box {
            font-size: 20px;
            color: #FAFAFA;
            font-weight: bold;

            .year-time-box-week {
              margin-top: 5px;
            }
          }
        }

        .screen-header-top-sales {
          width: 744px;
          height: 100px;
          position: absolute;
          right: 378px;
          top: 63.5px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 48px;
          line-height: 100px;

          .screen-header-top-sales-text {
            width: 100%;
            height: 100px;
            font-size: 50px;
            color: #DAEFFF;
            line-height: 100px;
            text-align: center;
            white-space: nowrap; /* 确保文本在一行内显示 */
            overflow: hidden; /* 超出容器的文本将被隐藏 */
            text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
          }
        }

        .screen-header-top-record {
          position: absolute;
          right: 4px;
          top: 118px;
          width: 402px;
          height: 46px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 56px 0 50px;

          .screen-header-top-record-item {
            font-size: 18px;
            font-weight: 600;
            color: #DAEFFF;
          }
        }

        .screen-header-top-sift {
          position: absolute;
          left: 20px;
          top: 126px;
          width: 773px;
          height: 40px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .screen-header-top-sift-all-time {
            width: 180px;
            height: 40px;
            background: linear-gradient(180deg, #466E8D 0%, #162636 100%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            position: relative;

            .screen-header-top-sift-all-text {
              width: 125px;
              font-size: 18px;
              font-weight: 700;
              color: #F4FBFF;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .screen-header-top-sift-all-image {
              width: 17px;
              height: 12px;
              background-image: url('/static/images/screen/time-down.png');
              background-size: 100% 100%;
            }
          }

          .screen-header-top-sift-all-time-right {
            margin-right: 5px;
          }

          .screen-header-top-sift-arrow {
            width: 40px;
            height: 40px;
            background-image: url('/static/images/screen/time-arrow.png');
            background-size: 100% 100%;
            margin: 0 4px;
          }

          .screen-header-top-sift-item {
            width: 80px;
            height: 40px;
            background: linear-gradient(180deg, #466E8D 0%, #162636 100%);
            margin: 0 10px;
            font-size: 18px;
            font-weight: 700;
            line-height: 40px;
            text-align: center;
            color: #F4FBFF;
            border: 2px solid transparent;
          }
        }
      }
    }


    .screen-content-data {
      display: flex;
      padding: 0 20px;
      justify-content: space-between;
      margin-top: 8px;

      .screen-content-data-left {

        .screen-content-data-left-income {
          width: 820px;
          height: 186px;

          .screen-content-data-left-income-top {
            width: 820px;
            height: 32px;
            display: flex;
            justify-content: center;

            .screen-content-data-left-income-top-right {
              width: 790px;
              height: 31px;
              background-image: url('/static/images/screen/screen-income-right.png');
              background-size: 100% 100%;
              margin-left: 10px;
              display: flex;
              justify-content: flex-end;
              align-items: center;
            }
          }

          .screen-content-data-left-income-bottom {
            width: 790px;
            height: 150px;
            background: rgba(113, 176, 225, 0.15);
            margin-left: 30px;
            margin-top: 5px;
            display: flex;
            justify-content: center;
            align-items: center;

            .screen-content-data-left-income-bottom-item {
              width: 198px;
              height: 150px;
              position: relative;

              .screen-content-data-left-income-bottom-item-text {
                position: absolute;
                left: 0;
                top: 0;
                width: 198px;
                height: 150px;
                font-size: 14px;
                font-weight: 700;
                color: #FFFFFF;
                text-align: center;
                z-index: 1;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;

                div {
                  font-weight: 700;
                }
              }
            }

            .screen-content-data-left-income-bottom-trend-image {
              width: 25px;
              height: 25px;
              background-image: url('/static/images/screen/exclamation.png');
              background-size: 100% 100%;
              margin-right: 4px;
            }

            .screen-content-data-left-income-bottom-trend {
              font-size: 25px;
              font-weight: 700;
              color: #D1E1FF;
            }
          }
        }

        .screen-content-data-order-and-rank {
          width: 820px;
          height: 236px;
          display: flex;
          margin-top: 5px;

          .screen-content-data-order {
            width: 400px;
            height: 236px;

            .screen-content-data-order-top {
              display: flex;

              .screen-content-data-order-arrow {
                width: 20px;
                height: 30px;
                background-image: url('/static/images/screen/screen-income-arrow.png');
                background-size: 100% 100%;
              }

              .screen-content-data-order-right {
                width: 370px;
                height: 30px;
                background-image: url('/static/images/screen/screen-order-right.png');
                margin-left: 10px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
              }
            }

            .screen-content-data-order-bottom {
              width: 370px;
              height: 200px;
              background: rgba(113, 176, 225, 0.15);
              margin: 5px 0 0 30px;
            }
          }

          .screen-content-data-rank {
            width: 400px;
            height: 236px;
            margin-left: 20px;

            .screen-content-data-rank-top {
              display: flex;

              .screen-content-data-rank-arrow {
                width: 20px;
                height: 30px;
                background-image: url('/static/images/screen/screen-income-arrow.png');
                background-size: 100% 100%;
              }

              .screen-content-data-rank-right {
                width: 370px;
                height: 30px;
                background-image: url('/static/images/screen/screen-rank-right.png');
                margin-left: 10px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
              }
            }

            .screen-content-data-rank-bottom {
              width: 370px;
              height: 200px;
              margin-top: 5px;
              margin-left: 30px;
              position: relative;

              .screen-content-data-rank-list-top {
                width: 370px;
                height: 25px;
                background-color: #1C2D45;
                display: flex;
                align-items: center;
                font-size: 10px;
                font-weight: normal;
                color: #D1E1FF;
                text-align: center;
                padding-left: 5px;
                position: absolute;
                left: 0;
                top: 0;
              }

              .screen-content-data-rank-list {
                width: 370px;
                height: 175px;
                position: absolute;
                top: 25px;
                left: 0;
                overflow-y: auto;


                .rank-list-item {
                  width: 370px;
                  height: 25px;
                  display: flex;
                  align-items: center;
                  font-size: 10px;
                  font-weight: normal;
                  color: #D1E1FF;
                  text-align: center;
                  padding-left: 5px;
                }
              }


              .rank-list-code {
                width: 100px;
                margin-right: 5px;
              }

              .rank-list-name {
                width: 127px;
                margin-right: 6px;
              }

              .rank-list-price {
                width: 100px;
              }
            }
          }
        }


        .screen-content-data-list {
          width: 820px;
          height: 186px;
          margin-top: 5px;

          .screen-content-data-list-top {
            display: flex;
            justify-content: center;


            .screen-content-data-list-top-right {
              width: 790px;
              height: 31px;
              background-image: url('/static/images/screen/order-list.png');
              background-size: 100% 100%;
              margin-left: 10px;
              display: flex;
              justify-content: flex-end;
              align-items: center;
            }
          }

          .screen-content-data-list-bottom {
            width: 790px;
            height: 150px;
            margin-top: 5px;
            margin-left: 30px;
            position: relative;

            .locate {
              position: absolute;
              top: 0;
              left: 0;
            }

            .screen-content-data-list-bottom-title {
              height: 25px;
              display: flex;
              align-items: center;
              font-size: 10px;
              font-weight: normal;
              color: #D1E1FF;
              text-align: center;
              background-color: #1C2D45;
              padding: 0 12px 0 20px;

              .data-list-name {
                width: 250px;
                margin-right: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .data-list-num {
                width: 60px;
                margin-right: 20px;
              }

              .data-list-price {
                width: 88px;
                margin-right: 20px;
              }

              .data-list-time {
                width: 112px;
                margin-right: 20px;
              }

              .data-list-status {
                width: 74px;
                margin-right: 20px;
              }

              .data-list-amount {
                width: 74px;
              }
            }

            .data-list {
              width: 790px;
              height: 125px;
              position: absolute;
              left: 0;
              top: 25px;
            }
          }
        }
      }
    }
  }


  .screen-content-data-left-income-top-right-tab {
    padding: 0 10px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
  }

  .screen-content-data-left-income-top-right-tab-active {
    padding: 0 10px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
  }

  .screen-content-data-left-order-top-right-tab {
    padding: 0 5px 0 6px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
  }

  .screen-content-data-left-order-top-right-tab-active {
    padding: 0 5px 0 6px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
  }

  .left-active {
    height: 25px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #71B0E1;
    border-right: none;
    color: #FFFFFF;
    line-height: 25px;
    background: radial-gradient(223% 86% at 100% 52%, #71B0E1 0%, rgba(0, 0, 0, 0) 100%), #1C2C44;
  }

  .left {
    color: #D1E1FF;
    line-height: 31px;
    height: 31px;
    background: #1C2C44;
    border: 1px solid;
    border-image: linear-gradient(270deg, #71B0E1 52%, rgba(113, 176, 225, 0) 100%) 1;
  }

  .right {
    color: #D1E1FF;
    line-height: 31px;
    height: 31px;
    background: #1C2C44;
    border: 1px solid;
    border-image: linear-gradient(90deg, #71B0E1 52%, rgba(113, 176, 225, 0) 100%) 1;
  }

  .right-active {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 25px;
    border: 1px solid #71B0E1;
    border-left: none;
    color: #FFFFFF;
    line-height: 25px;
    background: radial-gradient(223% 86% at 100% 52%, #71B0E1 0%, rgba(0, 0, 0, 0) 100%), #1C2C44;
  }

  .screen-content-data-left-income-top-arrow {
    width: 20px;
    height: 30px;
    background-image: url('/static/images/screen/screen-income-arrow.png');
    background-size: 100% 100%;
  }

  /* 隐藏滚动条但保持滚动功能（适用于Webkit内核的浏览器，如Chrome、Safari） */
  .screen-content-data-rank-list::-webkit-scrollbar,
  .data-list::-webkit-scrollbar,
  .modal-order-list::-webkit-scrollbar,
  .modal-box-error-box-list-bottom::-webkit-scrollbar{
    display: none; /* 隐藏滚动条 */
  }

  /* 确保内容区域可以滚动（如果需要的话） */
  .screen-content-data-rank-list,
  .data-list,
  .modal-order-list,
  .modal-box-error-box-list-bottom {
    overflow-y: auto; /* 仅允许垂直滚动 */
    -ms-overflow-style: none; /* IE 和 Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* 隐藏Firefox的滚动条 */
  .screen-content-data-rank-list,
  .data-list,
  .modal-order-list,
  .modal-box-error-box-list-bottom {
    scrollbar-width: none; /* Firefox */
  }

  .screen-content-data-status {
    margin-left: 20px;

  }

  .data-increase {
    background-image: url('/static/images/screen/screen-increase.png') !important;
  }

  .data-status {
    background-image: url('/static/images/screen/data-status.png') !important;
  }

  .device-status {
    width: 100%;
    height: 30px;
    margin-top: -12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 90px;
    position: relative;
    z-index: 9999;

    .device-status-btn {
      width: 110px;
      height: 30px;
      background: #DFC760;
      box-sizing: border-box;
      border: 1px solid #F9C900;
      font-size: 18px;
      font-weight: 700;
      line-height: 30px;
      text-align: center;
      color: #3D3D3D;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
      user-select: none; /* Standard syntax */
    }
  }

  .device-status-warn {
    background-image: url('/static/images/screen/screen-warn.png');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .device-status-warn-1 {
    background-image: url('/static/images/screen/screen-warn-2.png');
    background-size: cover;
    background-repeat: no-repeat;
  }


  .screen-content-data-map {
    width: 1026px;
    height: 859px;
    background: rgba(113, 176, 225, 0.1);
    position: relative;

    .screen-content-data-map-income {
      position: absolute;
      right: 0;
      top: 0;
      width: 279px;
      background: rgba(113, 176, 225, 0.1);

      .screen-content-data-map-box {
        width: 279px;
        position: relative;

        .screen-content-data-map-box-top {
          width: 279px;
          height: 30px;
          background-image: url('/static/images/screen/map-rank.png');
          background-size: contain;
          background-repeat: no-repeat;
        }

        .screen-content-map-list {
          padding: 6px 0;

          .screen-content-map-list-item {
            display: flex;
            justify-content: space-between;
            height: 20px;
            font-size: 14px;
            font-weight: normal;
            text-align: center;
            color: #DAEFFF;
            margin-bottom: 10px;
            padding: 0 20px 0 10px;

            .item-rank {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: radial-gradient(60% 60% at 50% 50%, #71B0E1 34%, rgba(216, 216, 216, 0) 100%);
              font-size: 14px;
              font-weight: normal;
              line-height: 20px;
              text-align: center;
              color: #FFFFFF;
            }

            .item-amount {
              width: 100px;
            }
          }
        }
      }
    }

    .screen-content-data-back {
      position: absolute;
      left: 10px;
      top: 10px;
      color: rgb(179, 239, 255);
      font-size: 20px;
      cursor: pointer;
      -webkit-user-select: none; /* Safari */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* IE10+/Edge */
      user-select: none; /* Standard syntax */
    }
  }


  .screen-blink-warn {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
  }


  @keyframes gradientFlash {
    0%, 100% {
      background: radial-gradient(50% 50% at 50% 50%, rgba(214, 0, 0, .2) 0%, rgba(214, 0, 0, .2) 100%);
    }
    50% {
      background: radial-gradient(50% 50% at 50% 50%, rgba(214, 0, 0, .5) 0%, rgba(214, 0, 0, .5) 100%);
    }
  }

  @keyframes gradientFlash2 {
    0%, 100% {
      background: radial-gradient(50% 50% at 50% 50%, rgba(249, 137, 0, .2) 0%, rgba(249, 137, 0, .2) 100%);
    }
    50% {
      background: radial-gradient(50% 50% at 50% 50%, rgba(249, 137, 0, .5) 0%, rgba(249, 137, 0, .5) 100%);
    }
  }


  .screen-blink-warn-1 {
    animation: gradientFlash 1s ease-in-out infinite;
  }

  .screen-blink-warn-2 {
    animation: gradientFlash2 1s ease-in-out infinite;
  }


  .modal-box {
    width: 442px;
    height: 565px;
    background-image: url('/static/images/screen/modal-box-1.png');
    background-size: 100% 100%;
    position: relative;

    .modal-box-close {
      width: 25px;
      height: 25px;
      position: absolute;
      right: 13px;
      top: 17px;
    }

    .modal-box-device-info {
      display: flex;
      padding-top: 70px;
      justify-content: center;

      .modal-box-device-info-image {
        width: 70px;
        height: 70px;
        margin-right: 7px;
      }

      .modal-box-device-info-text {
        height: 70px;

        .device-name,
        .device-code,
        .device-organize,
        .device-address {
          width: 305px;
          height: 17rpx;
          font-size: 12px;
          font-weight: 700;
          line-height: 17px;
          color: #FFFFFF;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .modal-box-device-status {
      width: 400px;
      margin: 15px auto 0;

      .modal-box-device-status-top {
        width: 400px;
        height: 16px;
        background-size: 100% 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .modal-box-device-status-bottom {
        width: 400px;
        height: 85px;
        background: rgba(113, 176, 225, 0.15);
        margin-top: 6px;

        .modal-box-device-status-bottom-box {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;

          .modal-box-device-status-bottom-box-item {
            width: 60px;
            height: 57px;
            background-size: contain;
            display: flex;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: #FFFFFF;
            padding-top: 9px;
          }
        }

        .modal-box-device-status-bottom-pie {
          display: flex;
          justify-content: center;
          align-items: center;


          .modal-box-device-status-bottom-pie-item {
            width: 25%;
            height: 85px;
          }
        }
      }

      .modal-order-box {
        position: relative;
        margin-top: 6px;
      }

      .modal-order-list-item-top {
        width: 400px;
        height: 25px;
        background: #1C2D45;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        padding: 0 13px 0 5px;

        div {
          height: 14px;
          font-size: 10px;
          font-weight: normal;
          line-height: 14px;
          text-align: center;
          color: #D1E1FF;
        }
      }

      .modal-order-list {
        height: 75px;
        overflow: auto;
        position: absolute;
        top: 25px;
        left: 0;

        .modal-order-list-item {
          width: 400px;
          height: 25px;
          background: #5C7AA4;
          display: flex;
          align-items: center;
          padding: 0 13px 0 5px;

          div {
            height: 14px;
            font-size: 10px;
            font-weight: normal;
            line-height: 14px;
            text-align: center;
            color: #D1E1FF;
          }

        }
      }

      .modal-list-item-name {
        width: 93px;
        margin-right: 5px;
      }

      .modal-list-item-sum {
        width: 57px;
        margin-right: 5px;
      }

      .modal-list-item-time {
        width: 112px;
        margin-right: 5px;
      }

      .modal-list-item-status {
        width: 50px;
        margin-right: 5px;
      }

      .modal-list-item-way {
        width: 50px;
      }
    }

    .modal-order-more {
      display: flex;
      align-items: center;
      padding-right: 15px;

      .modal-order-more-text {
        height: 15px;
        line-height: 15px;
        font-size: 8px;
        font-weight: normal;
        color: #D1E1FF;
        margin-right: 3px;
      }

      .modal-order-more-arrow {
        width: 8px;
        height: 15px;
        background-image: url('/static/images/screen/screen-income-arrow.png');
        background-size: 100% 100%;
        transform: rotateZ(180deg);
      }
    }
  }

  .modal-device-status {
    background-image: url('/static/images/screen/device-status.png');
  }

  .modal-income-bg {
    background-image: url('/static/images/screen/modal-income-bg.png');
  }

  .modal-order-bg {
    background-image: url('/static/images/screen/modal-order-bg.png');
  }

  .type-active {
    border-image: linear-gradient(180deg, #CEECFF 0%, #162637 100%) 2 !important;
  }

  .modal-error-box {
    width: 756px;
    height: 512px;
    background-size: contain;
    padding-top: 75px;
    position: relative;

    .modal-error-box-list {
      margin: 0 auto;
      width: 700px;
      height: 385px;
      position: relative;

      .modal-error-box-list-top {
        position: absolute;
        top: 0;
        left: 0;
      }

      .modal-box-error-box-list-bottom {
        width: 100%;
        height: 350px;
        position: absolute;
        top: 35px;
        left: 0;
        overflow: auto;
      }

      .modal-error-box-list-item {
        width: 700px;
        height: 35px;
        background-color: #1C2D45;
        display: flex;
        align-items: center;
        font-size: 10px;
        line-height: 35px;
        text-align: center;
        color: #D1E1FF;


        .modal-error-item-code {
          width: 100px;
          margin-right: 10px;
        }

        .modal-error-item-name {
          width: 127px;
          margin-right: 10px;
        }

        .modal-error-item-feedback,
        .modal-error-item-fault,
        .modal-error-item-recover {
          width: 112px;
          margin-right: 10px;
        }

        .modal-error-item-status {
          width: 61px;
        }
      }
    }
  }

  .modal-error-page {
    width: 700px;
    margin: 8px auto 0;
    display: flex;
    justify-content: flex-end;
  }

  .modal-error-box-close {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 7px;
    top: 4px;
  }

  .modal-error-box-bg {
    background-image: url('/static/images/screen/modal-error-bg.png');
  }

  .modal-error-box-bg-2 {
    background-image: url('/static/images/screen/modal-error-bg-2.png');
  }

  .modal-error-box-bg-3 {
    background-image: url('/static/images/screen/modal-error-bg-3.png');
  }

  .details-bg-1 {
    background-image: url('/static/images/screen/details-item-3.png');
  }

  .details-bg-2 {
    background-image: url('/static/images/screen/details-item-2.png');
  }

  .details-bg-3 {
    background-image: url('/static/images/screen/details-item-5.png');
  }

  .details-bg-4 {
    background-image: url('/static/images/screen/details-item-4.png');
  }

  .details-bg-5 {
    background-image: url('/static/images/screen/details-item-1.png');
  }

  .screen-content-data-list-bottom-title-shop {
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: normal;
    color: #D1E1FF;
    text-align: center;
    background-color: #1C2D45;
    padding: 0 7px 0 5px;

    div {
      line-height: 25px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .data-list-shop-code {
      width: 100px;
      margin-right: 20px;
    }

    .data-list-shop-device-name {
      width: 160px;
      margin-right: 20px;
    }

    .data-list-shop-name {
      width: 100px;
      margin-right: 20px;
    }

    .data-list-shop-time {
      width: 112px;
      margin-right: 20px;
    }

    .data-list-shop-status {
      width: 93px;
      margin-right: 20px;
    }

    .data-list-shop-amount {
      width: 113px;
    }
  }


  .screen-content-data-user {
    display: flex;
    align-items: center;
    position: absolute;
    left: 10px;
    bottom: 120px;

    .screen-content-data-user-left {
      width: 100px;
      height: 100px;
      background: radial-gradient(50% 50% at 50% 50%, #3779C4 0%, #011B41 100%);
      border-radius: 50%;
      margin-right: 10px;
    }

    .screen-content-data-user-right-1 {
      height: 28px;
      line-height: 28px;
      font-size: 20px;
      color: #D1E1FF;
    }


    .screen-content-data-user-right-2 {
      height: 42px;
      line-height: 42px;
      font-weight: 400;
      font-size: 30px;
      text-shadow: 0 0 5px #3779C4;
      color: #D1E1FF;


      .text {
        vertical-align: text-bottom;
      }

      .number {
        vertical-align: text-top;
      }
    }


    .screen-content-data-user-right-3 {
      height: 21px;
      line-height: 21px;
      font-size: 15px;
      font-weight: normal;
      color: #D1E1FF;
    }
  }

  .modal-box-bg-1 {
    background-image: url('/static/images/screen/modal-box-1.png');
  }

  .modal-box-bg-2 {
    background-image: url('/static/images/screen/modal-box-2.png');
  }

  .modal-box-bg-3 {
    background-image: url('/static/images/screen/modal-box-3.png');
  }

  .modal-box-bg-4 {
    background-image: url('/static/images/screen/modal-box-4.png');
  }


  .order-item-bg-1 {
    background: url('/static/images/screen/order-item.bg.png') no-repeat center / cover;
  }

  .order-item-bg-2 {
    background-color: #1C2D45;
  }

  .rank-item-bg-1 {
    background: url('/static/images/screen/rank-bg.png') no-repeat center / cover;
  }

  .rank-item-bg-2 {
    background-color: #1C2D45;
  }
  .btn-gray{
    opacity:0.7
  }
</style>